<template>
  <!-- "https://cdn-go.cn/qq-web/zc.qq.com/latest/v3/img/01-1.jpg" -->

  <div class="register">
    <div class="img">
      <Tabimg :style="hidden <= 1000 ? { display: 'none' } : ''" :listimg="listimg" />
    </div>
    <div class="alert-top" v-if="off">
      <a-alert :message="tscode" type="success" :banner="true" />
    </div>
    <div class="register-box">
      <h1>未来社区注册</h1>

      <h5>每一天乐在沟通</h5>

      <b-form @submit="onSubmit" v-if="show">
        <b-form-group class="mt-3" id="input-group-2" label="昵称" label-for="input-2">
          <b-form-input
            class="mt-1"
            id="input-2"
            v-model="form.name"
            placeholder="请输入昵称"
            required
          ></b-form-input>
        </b-form-group>

        <b-form-group
          class="mt-3"
          id="input-group-3"
          label="设置密码"
          label-for="input-3"
        >
          <b-form-input
            :class="passwordverify.class"
            class="mt-1"
            id="input-3"
            type="password"
            v-model="form.password"
            placeholder="请输入密码"
            required
          ></b-form-input>
          <span class="span1" v-if="passwordverify.text">{{ passwordverify.text }}</span>
        </b-form-group>

        <b-form-group
          class="mt-3"
          id="input-group-4"
          label="重复密码"
          label-for="input-4"
        >
          <b-form-input
            :class="passwordverify2.class"
            class="mt-1"
            id="input-4"
            type="password"
            v-model="form.password2"
            placeholder="请再次密码"
            required
          ></b-form-input>
          <span class="span1" v-if="passwordverify2.text">{{
            passwordverify2.text
          }}</span>
        </b-form-group>

        <b-form-group class="mt-3" id="input-group-1" label="手机" label-for="input-1">
          <b-form-input
            class="mt-1"
            :class="verify.class"
            id="input-1"
            v-model="form.iphone"
            type="text"
            placeholder="请输入手机号"
            required
          ></b-form-input>
          <span class="span1" v-if="verify.text">{{ verify.text }}</span>
        </b-form-group>

        <b-form-group id="input-group-code" class="mt-3" label-for="input-code">
          <b-row>
            <b-container class="bv-example-row">
              <b-row>
                <b-col>
                  <b-form-input
                    id="input-code"
                    v-model="form.code"
                    placeholder="请输入验证码"
                    required
                  ></b-form-input>
                </b-col>

                <b-col>
                  <b-button variant="outline-primary" @click="getRegisterCode"
                    >获取验证码</b-button
                  >
                </b-col>
              </b-row>
            </b-container>
          </b-row>
        </b-form-group>

        <b-row>
          <b-col class="regisrer-user">
            <b-button type="submit" variant="primary" class="mt-4 btn btn-primary btn-md"
              >注册新用户</b-button
            >

            <router-link class="btn-a" :to="{ name: 'Login' }"
              >已有账号？去登入</router-link
            >
          </b-col>
        </b-row>

        <p class="p">版权所有@未来社区</p>
      </b-form>
    </div>
  </div>
</template>

<script>
import Tabimg from "../components/Tabimg.vue";
export default {
  data() {
    return {
      form: {
        iphone: "",
        name: "",
        password: "",
        password2: "",
        code: "",
        food: null,
        checked: [],
        tscode: "",
      },
      foods: [
        { text: "Select One", value: null },
        "Carrots",
        "Beans",
        "Tomatoes",
        "Corn",
      ],
      listimg: [
        require("@/assets/01-1.jpg"),
        require("@/assets/01-2.jpg"),
        require("@/assets/01-3.jpg"),
        require("@/assets/01-4.jpg"),
      ],
      show: true,
      regular: {
        myreg: /^[1][3,4,5,6.7,8,9][0-9]{9}$/,
        patten: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/,
      },
      isShow: false,
      off: false,
    };
  },
  components: {
    Tabimg,
  },
  computed: {
    hidden() {
      let hidden = document.documentElement.offsetWidth;
      return hidden;
    },
    verify() {
      if (this.isShow) {
        let myreg = /^[1][3,4,5,6.7,8,9][0-9]{9}$/; //手机号码正则
        return this.$Code.verify(this.form.iphone, myreg);
      } else {
        return {};
      }
    },
    passwordverify() {
      if (this.isShow) {
        let patten = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/; //密码正则
        return this.$Code.verify(this.form.password, patten);
      } else {
        return {};
      }
    },
    passwordverify2() {
      if (this.isShow) {
        if (this.form.password == this.form.password2) {
          let patten = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/; //密码正则
          return this.$Code.verify(this.form.password2, patten);
        } else {
          return {
            class: "form-control is-invalid",
            text: "两次密码不一致",
            status: false,
          };
        }
      } else {
        return {};
      }
    },
  },
  methods: {
    async onSubmit(event) {
      event.preventDefault();
      let StatusPass = this.passwordverify.status;
      let StatusPass2 = this.passwordverify2.status;
      let StatusPhone = this.verify.status;
      if (StatusPass && StatusPass2 && StatusPhone) {
        let res = await this.$Api.setRegisteruser(this.form);
        console.log(res);
      } else {
        alert("账号或者密码错误");
      }
    },
    async getRegisterCode() {
      //注册账号验证码的api
      let res = await this.$Api.RegisterCode(this.form.iphone);
      if (res.data.ret == 200) {
        this.tscode = res.data.data[0].code;
      } else {
        this.tscode = res.data.msg.phone;
      }
      this.off = true;
      setTimeout(() => {
        this.off = false;
      }, 5000);

      // console.log(res.data.data[0].phone);
    },
  },
  watch: {
    form: {
      handler() {
        this.isShow = true;
      },
      deep: true,
    },
  },
};
</script>

<style lang="scss">
.register {
  width: 100vw;
  display: flex;
  flex-wrap: wrap;
  .register-box {
    width: 25%;
    min-width: 350px;
    margin: auto;
  }
  .img {
    img {
      height: 100vh;
    }
  }
  .regisrer-user {
    display: flex;
    justify-content: space-between;
  }
  .btn-a {
    text-decoration: none;
    margin-top: 30px;
  }
  .p {
    width: 100%;
    text-align: center;
    margin-top: 80px;
  }
  .span1 {
    position: absolute;
    color: red;
    font-size: 12px;
    margin-left: 10px;
  }
   .alert-top{
    width: 300px;
    position: absolute;
    top: 0px;
    left: 50%;
    z-index: 999;

  }
}
</style>
